<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }
        
        .login-card {
            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
            transition: all 0.3s ease;
        }
        
        .login-card:hover {
            box-shadow: 0 15px 30px -5px rgba(59, 130, 246, 0.25);
        }
        
        .input-field:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }
        
        .input-error {
            border-color: #ef4444;
        }
        
        .error-message {
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        
        .error-message.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        @media (max-width: 640px) {
            .login-card {
                width: 90%;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="login-card bg-white rounded-xl p-8 w-full max-w-md">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">欢迎回来</h1>
            <p class="text-gray-500">请登录您的账户</p>
        </div>
        
        <form id="loginForm" class="space-y-6" action="login.php" method="POST">
            <div>
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名/邮箱</label>
                <div class="relative">
                    <input 
                        type="text" 
                        id="username" 
                        name="username" 
                        required
                        class="input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none transition"
                        placeholder="请输入用户名或邮箱"
                    >
                    <div class="error-message text-sm text-red-500 mt-1" id="usernameError"></div>
                </div>
            </div>
            
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <div class="relative">
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        required
                        class="input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none transition"
                        placeholder="请输入密码"
                    >
                    <div class="error-message text-sm text-red-500 mt-1" id="passwordError"></div>
                </div>
            </div>
            
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <input 
                        type="checkbox" 
                        id="remember" 
                        name="remember"
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                    >
                    <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
                </div>
                <a href="#" class="text-sm text-blue-600 hover:text-blue-500">忘记密码?</a>
            </div>
            
            <button 
                type="submit"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300"
            >
                登录
            </button>
            
            <div class="text-center text-sm text-gray-500">
                还没有账户? 
                <a href="register.html" class="text-blue-600 hover:text-blue-500 font-medium">立即注册</a>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('loginForm');
            const usernameInput = document.getElementById('username');
            const passwordInput = document.getElementById('password');
            const usernameError = document.getElementById('usernameError');
            const passwordError = document.getElementById('passwordError');
            
            // 输入框验证
            function validateInput(input, errorElement, message) {
                if (!input.value.trim()) {
                    input.classList.add('input-error');
                    errorElement.textContent = message;
                    errorElement.classList.add('show');
                    return false;
                } else {
                    input.classList.remove('input-error');
                    errorElement.classList.remove('show');
                    return true;
                }
            }
            
            // 表单提交
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                let isValid = true;
                
                // 验证用户名
                if (!validateInput(usernameInput, usernameError, '请输入用户名或邮箱')) {
                    isValid = false;
                }
                
                // 验证密码
                if (!validateInput(passwordInput, passwordError, '请输入密码')) {
                    isValid = false;
                }
                
                if (isValid) {
                    const formData = new FormData(form);
                    
                    fetch(form.action, {
                        method: form.method,
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'error') {
                            // 显示后端返回的错误信息
                            if (data.errors.username) {
                                usernameError.textContent = data.errors.username;
                                usernameError.classList.add('show');
                                usernameInput.classList.add('input-error');
                            }
                            if (data.errors.password) {
                                passwordError.textContent = data.errors.password;
                                passwordError.classList.add('show');
                                passwordInput.classList.add('input-error');
                            }
                        } else {
                            // 登录成功，重定向到指定页面
                            window.location.href = data.redirect || 'dashboard.php';
                        }
                    })
                    .catch(error => {
                        console.error('登录请求失败:', error);
                        alert('登录过程中发生错误，请重试');
                    });
                }
            });
            
            // 输入框实时验证
            usernameInput.addEventListener('input', function() {
                if (this.value.trim()) {
                    this.classList.remove('input-error');
                    usernameError.classList.remove('show');
                }
            });
            
            passwordInput.addEventListener('input', function() {
                if (this.value.trim()) {
                    this.classList.remove('input-error');
                    passwordError.classList.remove('show');
                }
            });
        });
    </script>
</body>
</html>
